<template>
  <div>
    <div>
      <el-row>
        <el-col :span="15" :offset="2">
          <div>
            <h3> {{ videoDetail.videoName }} </h3>
          </div>
          <div style="margin-top: 5px">
            观看量{{ videoDetail.videoWatchCount }} 评论数{{ comments.length }} 上传日期{{ videoDetail.videoDate }}
          </div>
        </el-col>
        <el-col :span="5">
          <el-avatar shape="square" :size="50" :src="circleUrl"></el-avatar>
          {{ videoDetail.videoAuthor }}
          <el-button @click="follow(videoDetail.authorId)" type="primary" v-show="!isFollow">关 注</el-button>
          <el-button @click="follow(videoDetail.authorId)" v-show="isFollow">已关注</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 5px">
      <el-row>
        <el-col :span="15" :offset="2">
          <div>
            <video :src="videoDetail.videoPath" width="1077" height="606" controls></video>
          </div>
          <div>
            <el-button icon="el-icon-thumb" @click="thumb(videoId)" type="primary" v-show="isThumb"></el-button>
            <el-button icon="el-icon-thumb" @click="thumb(videoId)" v-show="!isThumb"></el-button>

            <el-button icon="el-icon-star-off" @click="collect(videoId)" type="primary" v-show="isCollect"></el-button>
            <el-button icon="el-icon-star-off" @click="collect(videoId)" v-show="!isCollect"></el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 5px">
      <el-row>
        <el-col :span="15" :offset="2">
          <div style="display: inline-block; font-size: 24px">评论</div>
          <div style="display: inline-block;">{{ comments.length }}</div>
          <div style="margin-top: 5px">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入内容"
              v-model="textarea"
              style="width: 1077px">
            </el-input>
          </div>
          <div style="margin-top: 5px">
            <el-button type="primary" @click="publish">发布</el-button>
          </div>
          <div v-for="(item, index) in this.comments" :key="item.id" style="margin-top: 5px">
            <div>
              <el-avatar size="small" :src="circleUrl"></el-avatar>
              {{ item.userName }}
            </div>
            <div>
              {{ item.content }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { collectBehavior, followBehavior, getVideo, likesBehavior, loadBehavior, updateVideo } from '@/api/video'
import { addComments, listComments } from '@/api/comments'
import { getInfoById } from '@/api/login'
import { addCollect, delCollect, listCollect } from '@/api/collect'
import { addFollow, delFollow, listFollow } from '@/api/follow'

export default {
  data () {
    return {
      videoId: 0,
      videoDetail: {},
      circleUrl: '',
      textarea: '',
      comments: [],
      commentsFormServe: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        content: null,
        time: null,
        videoId: null,
        thuCount: null
      },
      // 查询参数 收藏表
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        videoId: null,
        userId: null
      },
      // 查询参数 关注表
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        followId: null,
        userId: null
      },
      isThumb: false,
      isFollow: false,
      isCollect: false
    }
  },
  async created () {
    // 获取视频
    this.videoId = this.$route.params.id
    const res1 = await getVideo(this.videoId)
    res1.data.data.videoWatchCount += 1
    this.videoDetail = res1.data.data
    await updateVideo(res1.data.data)

    // 获取视频评论
    this.queryParams.videoId = this.videoId
    const res2 = await listComments(this.queryParams)
    this.commentsFormServe = res2.data.rows

    // 给视频评论添加用户名字
    for (const comment of this.commentsFormServe) {
      const userName = await this.getUserName(comment.userId)
      this.comments.push({
        ...comment,
        userName: userName
      })
    }

    // 获取用户行为
    const temp = {
      videoId: this.videoId,
      userId: JSON.parse(localStorage.getItem('user')).userId,
      followId: this.videoDetail.videoAuthorid
    }
    const res = await loadBehavior(temp)
    this.isThumb = res.data.data.islike
    this.isCollect = res.data.data.iscollection
    this.isFollow = res.data.data.isFollow

    // 获取作者头像
    const res3 = await getInfoById(this.videoDetail.videoAuthorid)
    this.circleUrl = res3.data.data.avatar
  },
  methods: {
    async publish () {
      const temp = {
        content: this.textarea,
        videoId: this.videoId,
        userId: JSON.parse(localStorage.getItem('user')).userId,
        time: new Date(),
        thuCount: 0
      }
      await addComments(temp)
      this.textarea = ''
      this.comments.push({ ...temp, userName: JSON.parse(localStorage.getItem('user')).userName })

      const res1 = await getVideo(this.videoId)
      res1.data.data.videoCommentsCount = this.comments.length
      await updateVideo(res1.data.data)
    },
    async getUserName (userId) {
      const res = await getInfoById(userId)
      return res.data.data.userName
    },
    async collect (videoId) {
      await collectBehavior({
        operation: !this.isCollect,
        SysCollect: {
          userId: JSON.parse(localStorage.getItem('user')).userId,
          videoId: videoId
        }
      })

      this.queryParams2.videoId = videoId
      this.queryParams2.userId = JSON.parse(localStorage.getItem('user')).userId
      const res = await listCollect(this.queryParams2)
      if (this.isCollect) {
        await delCollect(res.data.rows[0].id)
      } else {
        await addCollect({
          userId: JSON.parse(localStorage.getItem('user')).userId,
          videoId: this.videoId
        })
      }

      this.isCollect = !this.isCollect
    },
    async follow (authorId) {
      await followBehavior({
        operation: !this.isFollow,
        SysFollow: {
          userId: JSON.parse(localStorage.getItem('user')).userId,
          followId: this.videoDetail.videoAuthorid
        }
      })

      this.queryParams3.followId = this.videoDetail.authorId
      this.queryParams3.userId = JSON.parse(localStorage.getItem('user')).userId
      const res = await listFollow(this.queryParams3)
      if (this.isFollow) {
        await delFollow(res.data.rows[0].id)
      } else {
        await addFollow({
          userId: JSON.parse(localStorage.getItem('user')).userId,
          followId: this.videoDetail.videoAuthorid
        })
      }

      this.isFollow = !this.isFollow
    },
    async thumb (videoId) {
      await likesBehavior({
        operation: !this.isThumb,
        SysVideo: {
          id: videoId
        }
      })

      this.isThumb = !this.isThumb
    }
  }
}
</script>

<style scoped lang="less">

</style>
